<div class="hbox hbox-auto-xs hbox-auto-sm bg-light " ng-controller="ContactCtrl" ng-init="
  	app.settings.asideFixed = true; app.settings.asideDock = false; app.settings.container = false; 
  	app.hideAside = false; app.hideFooter = true;" >

	<div class="col w b-r zn-font">
		<div class="vbox">
			<div class="row-row">
				<div class="cell scrollable hover">
					<div class="cell-inner">
						<div class="list-group no-radius no-border no-bg m-b-none">
							<a class="list-group-item b-b" ng-class="{'focus': (filter == '')}" ng-click="selectGroup({name:''})">所有联系人</a> 
							<a class="list-group-item m-l hover-anchor b-a no-select" ng-repeat="item in groups" " ng-class="{'focus m-l-none': item.selected}" ng-click="selectGroup(item)" ng-dblclick="editItem(item)"> 
								<span ng-click="deleteGroup(item)" class="pull-right text-muted hover-action"><i class="fa fa-times"></i></span> 
								<span class="block m-l-n" ng-class="{'m-n': item.selected }">{{ item.name ? item.name : 'Untitled' }}</span> 
								<input type="text" class="form-control pos-abt" ng-show="item.editing" ng-blur="doneEditing(item)" ng-model="item.name" style="top: 3px; left: 2px; width: 98%" ui-focus="item.editing">
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="wrapper b-t">
				<span tooltip="Double click to Edit" class="pull-right text-muted inline wrapper-xs m-r-sm"><i class="fa fa-question"></i></span> 
				<a href class="btn btn-sm btn-default" ng-click="createGroup()"><i class="fa fa-plus fa-fw m-r-xs"></i>新增部门</a>
			</div>
		</div>
	</div>

	<div class="col w-lg lter b-r zn-font">
		<div class="vbox">
			<div class="wrapper-xs b-b">
				<div class="input-group m-b-xxs">
					<span class="input-group-addon input-sm no-border no-bg"><i class="icon-magnifier text-md m-t-xxs"></i></span> 
					<input type="text" class="form-control input-sm no-border no-bg" ng-model="query" placeholder="按关键字查询联系人">
				</div>
			</div>
			<div class="row-row">
				<div class="cell hover" ui-jq="slimScroll" ui-options="{height:'100%', size:'9px'}">
					<div class="cell-inner">
						<div class="m-t-n-xxs">
							<div class="list-group list-group-lg no-radius no-border no-bg m-b-none">
								<a ng-repeat="item in items | filter:{group:filter} | filter:query | orderBy:'name'" class="list-group-item m-l"
								   		ng-class="{'select m-l-none': item.selected }" ng-click="selectItem(item)"> 
									 <span class="block text-ellipsis m-l-n text-md" ng-class="{'m-l-none': item.selected }"> {{item.name}} 
									 	<em ng-hide="!item.name" class="text-muted">({{item.mobile}})</em>
									 	<span ng-hide="item.name">No Name</span>
									 </span>
								</a>
							</div>
						</div>
						<div class="text-center pos-abt w-full" style="top: 50%;" ng-hide="(items | filter:{group:filter} | filter:query).length">没有相关联系人</div>
					</div>
				</div>
			</div>
			<div class="wrapper b-t text-center">
				<a href class="btn btn-sm btn-default btn-addon" ng-click="createItem()"><i class="fa fa-plus fa-fw m-r-xs"></i>新增联系人</a>
			</div>
		</div>
	</div>

	<div class="col bg-white-only zn-font">
		<div class="vbox">
			<div class="wrapper-sm b-b">
				<div class="m-t-n-xxs m-b-n-xxs m-l-xs">
					<a class="btn btn-xs btn-default pull-right" ng-hide="!item" ng-click="deleteItem(item)"><i class="fa fa-times"></i></a> 
					<a class="btn btn-xs btn-default" ng-hide="item.editing" ng-click="editItem(item)">Edit</a> 
					<a class="btn btn-xs btn-default" ng-show="item.editing" ng-click="doneEditing(item)">Done</a>
				</div>
			</div>
			<div class="row-row">
				<div class="cell">
					<div class="cell-inner">
						<div class="wrapper-lg">
							<div class="hbox h-auto m-b-lg">
								<div class="col text-center w-sm">
									<div class="thumb-lg avatar inline">
										<img src="/sweeter/resources/images/a0.jpg" >
									</div>
								</div>
								<div class="col v-middle h1 font-thin" style="font-family:华文细黑">
									<div ng-hide="item.editing">{{item.name}}</div>
									<div ng-show="item.editing">
										<input type="text" placeholder="Name" class="form-control w-auto input-lg m-b-n-xxs font-bold" ng-model="item.name"> 
									</div>
								</div>
							</div>
							<div class="form-horizontal">
								<div class="form-group m-b-sm" ng-hide="!item.mobile && !item.editing">
									<label class="col-sm-3 control-label text-muted">手机号码</label>
									<div class="col-sm-9">
										<p class="form-control-static" ng-hide="item.editing">{{item.mobile}}</p>
										<input type="text" class="form-control" ng-show="item.editing" ng-model="item.mobile">
									</div>
								</div>
								<div class="form-group m-b-sm" ng-hide="!item.home && !item.editing">
									<label class="col-sm-3 control-label text-muted">住宅电话</label>
									<div class="col-sm-9">
										<p class="form-control-static" ng-hide="item.editing">{{item.home}}</p>
										<input type="text" class="form-control" ng-show="item.editing" ng-model="item.home">
									</div>
								</div>
								<div class="form-group m-b-sm" ng-hide="!item.work && !item.editing">
									<label class="col-sm-3 control-label text-muted">工作电话</label>
									<div class="col-sm-9">
										<p class="form-control-static" ng-hide="item.editing">{{item.work}}</p>
										<input type="text" class="form-control" ng-show="item.editing" ng-model="item.work">
									</div>
								</div>
								<div class="form-group m-b-sm" ng-hide="!item.address && !item.editing">
									<label class="col-sm-3 control-label text-muted">联系地址</label>
									<div class="col-sm-9">
										<p class="form-control-static" ng-hide="item.editing">{{item.address}}</p>
										<input type="text" class="form-control" ng-show="item.editing" ng-model="item.address">
									</div>
								</div>
								<div class="form-group m-b-sm" ng-hide="!item.email && !item.editing">
									<label class="col-sm-3 control-label text-muted">邮箱地址</label>
									<div class="col-sm-9">
										<p class="form-control-static" ng-hide="item.editing">{{item.email}}</p>
										<input type="text" class="form-control" ng-show="item.editing" ng-model="item.email">
									</div>
								</div>
								<div class="form-group m-b-sm" ng-hide="!item.notes && !item.editing">
									<label class="col-sm-3 control-label text-muted">工作签名</label>
									<div class="col-sm-9">
										<p class="form-control-static" ng-hide="item.editing">{{item.notes}}</p>
										<textarea class="form-control" ng-show="item.editing" ng-model="item.notes" rows="3"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>